<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import { SceneBasic } from '../js/scene-basic'
export default {
  mounted() {
    const sceneBasic = new SceneBasic()

    //导入纹理
    const textureLoader = new THREE.TextureLoader()
    const img = require('./static/baite.png')
    const logo = textureLoader.load(img)
    const aplha = textureLoader.load(img)
    //设置纹理偏移
    logo.offset.x = 0
    logo.offset.y = 0
    //设置纹理旋转
    logo.rotation = 0
    //设置旋转的中心角度
    logo.center.set(0.5, 0.5)
    //设置纹理重复
    logo.repeat.set(2, 2)
    //设置重复模式
    logo.wrapS = THREE.RepeatWrapping
    logo.wrapT = THREE.RepeatWrapping
    //纹理显示设置
    logo.minFilter = THREE.NearestFilter
    logo.magFilter = THREE.NearestFilter
    console.log(logo)
    //添加物体
    const cubeGeometry = new THREE.BoxBufferGeometry(20, 20, 20)
    const basicMaterial = new THREE.MeshBasicMaterial({
      color: '#fff000',
      map: logo,
      // alphaMap: aplha,
      transparent: true, //黑色透明
      opacity: 0.5,
    })
    //双面材质
    basicMaterial.side = THREE.DoubleSide
    const cube = new THREE.Mesh(cubeGeometry, basicMaterial)

    //修改相机位置，放到物体内部
    // sceneBasic.camera.position.set(0.1, 0, 0)

    //创建平面
    const plane = new THREE.Mesh(
      new THREE.PlaneGeometry(50, 50),
      // new THREE.MeshBasicMaterial({
      //   color: '#cccccc',
      // })
      basicMaterial
    )
    //设置平面位置
    plane.rotation.x = -0.5 * Math.PI
    // sceneBasic.scene.add(plane)

    sceneBasic.scene.add(cube)
    sceneBasic.render()
  },
}
</script>

<style></style>
